<template>
    <el-dialog v-model="addOrEditVisible" title="题集解析" :before-close="closeEditDialog"
               width="50%">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
                 :size="formSize" status-icon>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="" prop="id">
                            <el-input v-model="ruleForm.id"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="题集编号" prop="collectId">
                            <el-input v-model="ruleForm.collectId"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="最低分数" prop="minScore">
                            <el-input v-model="ruleForm.minScore"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="最高分数" prop="maxScore">
                            <el-input v-model="ruleForm.maxScore"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="结果说明" prop="resultTitle">
                            <el-input v-model="ruleForm.resultTitle"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="结果描述" prop="resultDesc">
                            <el-input v-model="ruleForm.resultDesc"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="状态 0-停用 1-启用 2-备用" prop="statusFlag">
                            <el-input v-model="ruleForm.statusFlag"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="是否删除 0-否 1-是" prop="delFlag">
                            <el-input v-model="ruleForm.delFlag"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="创建人" prop="createUser">
                            <el-input v-model="ruleForm.createUser"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="创建时间" prop="createTime">
                            <el-input v-model="ruleForm.createTime"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="修改时间" prop="updateTime">
                            <el-input v-model="ruleForm.updateTime"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="ruleForm.remark"/>
                        </el-form-item>
                    </el-col>
                </el-row>
        </el-form>
        <template #footer>
         <span class="dialog-footer">
           <el-button @click="closeEditDialog">关闭</el-button>
           <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
         </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
    import {reactive, ref} from 'vue'
    import type {FormInstance, FormRules} from  'element-plus' 
    import {ElMessage} from "element-plus";
    import router from "@/router";
    import {DepressCollectResult } from '@/apis/model/exam/DepressCollectResultModel';
    import {insertDepressCollectResult, updateDepressCollectResult} from '@/apis/http/exam/DepressCollectResultHttp';

    interface Prop {
        addOrEditVisible: boolean,
        ruleForm: DepressCollectResult,
        addDataType: string
    }

    // 刷新list页面
    const refushList = ref(false);

    // 传递过来的参数
    const props = defineProps<Prop>();

    const emit = defineEmits(["closeEditDialog"]);

    // 关闭按钮
    const closeEditDialog = () => {
        emit("closeEditDialog", {
            addOrEditVisible: !props.addOrEditVisible,
            refushList: refushList.value
        })
    }
    const formSize = ref('default')
    const ruleFormRef = ref < FormInstance > ()

    const rules = reactive < FormRules > ({
        id: [
            {required: true, message: '请输入', trigger: 'blur'}
        ],
        collectId: [
            {required: true, message: '请输入题集编号', trigger: 'blur'}
        ],
        minScore: [
            {required: true, message: '请输入最低分数', trigger: 'blur'}
        ],
        maxScore: [
            {required: true, message: '请输入最高分数', trigger: 'blur'}
        ],
        resultTitle: [
            {required: true, message: '请输入结果说明', trigger: 'blur'}
        ],
        resultDesc: [
            {required: true, message: '请输入结果描述', trigger: 'blur'}
        ],
        statusFlag: [
            {required: true, message: '请输入状态 0-停用 1-启用 2-备用', trigger: 'blur'}
        ],
        delFlag: [
            {required: true, message: '请输入是否删除 0-否 1-是', trigger: 'blur'}
        ],
        createUser: [
            {required: true, message: '请输入创建人', trigger: 'blur'}
        ],
        createTime: [
            {required: true, message: '请输入创建时间', trigger: 'blur'}
        ],
        updateTime: [
            {required: true, message: '请输入修改时间', trigger: 'blur'}
        ],
        remark: [
            {required: true, message: '请输入备注', trigger: 'blur'}
        ],
    })

    const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl)  return 
    await formEl.validate((valid, fields) => {
        if (valid) {
            // 新增
            if (props.addDataType === 'add') {
                insertDepressCollectResult(props.ruleForm).then(res => {
                    const code = res.code;
                    const message: string = res.message;
                    const data = res.data;
                    if (code == 200) {
                        ElMessage({
                            message: '创建成功！',
                            type: 'success',
                        })
                        refushList.value = true
                        closeEditDialog()
                    } else {
                        ElMessage.error('创建失败！')
                    }
                })
            } else if (props.addDataType === 'edit') {
                updateDepressCollectResult(props.ruleForm).then(res => {
                    const code = res.code;
                    const message: string = res.message;
                    const data = res.data;
                    if (code == 200) {
                        ElMessage({
                            message: '更新成功！',
                            type: 'success',
                        })
                        refushList.value = true
                        closeEditDialog()
                    } else {
                        ElMessage.error('更新失败！')
                    }
                })
            }

        } else {
            ElMessage.error('请完善信息！')
        }
    })
    }
</script>

<style scoped>
    .dialog-footer button:first-child {
        margin-right: 10px;
    }
</style>
